<template>
  <el-menu
    :default-active="activeMenu"
    class="admin-menu"
    router
  >
    <el-menu-item index="/admin/dashboard">
      <el-icon><Monitor /></el-icon>
      <span>仪表盘</span>
    </el-menu-item>

    <el-menu-item index="/admin/products">
      <el-icon><Goods /></el-icon>
      <span>菜品管理</span>
    </el-menu-item>

    <el-menu-item index="/admin/orders">
      <el-icon><List /></el-icon>
      <span>订单管理</span>
    </el-menu-item>

    <el-menu-item index="/admin/users">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>

    <el-menu-item index="/admin/tables">
      <el-icon><Grid /></el-icon>
      <span>餐桌管理</span>
    </el-menu-item>

    <el-menu-item index="/admin/reviews">
      <el-icon><Star /></el-icon>
      <span>评价管理</span>
    </el-menu-item>

    <el-menu-item index="/admin/messages">
      <el-icon><Message /></el-icon>
      <span>消息管理</span>
    </el-menu-item>

    <el-menu-item index="/admin/settings">
      <el-icon><Setting /></el-icon>
      <span>系统设置</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  Monitor,
  Goods,
  List,
  User,
  Grid,
  Star,
  Message,
  Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.admin-menu {
  height: 100%;
  border-right: none;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-icon {
  margin-right: 8px;
}
</style> 